<template>
       <el-container class="main_contain">
           <el-header class="el-header" height="60px">
               <div class="left_box">
                   <span class="title">zlx</span>
               </div>
               <div class="right_box">
                   <el-row>
                       <el-button icon="el-icon-switch-button" type="info">退出登录</el-button>

                   </el-row>
               </div>
           </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#f9f7f7"
                            text-color="#000000"
                            active-text-color="#ffd04b"
                            :router="true">
                        <MenuTree :menuList="this.MenuList"></MenuTree>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>

</template>

<script>
    import axios from "axios";
    import MenuTree from "../components/MenuTree";

    export default {
        name: "Home",
        data(){
          return{
              MenuList: []
          }

        },
        created() {
            axios.get('/system/cfg/menu')
                .then( res =>{
                    this.MenuList=res
                })
        },

        methods: {

        },
        components: {MenuTree}
    }

</script>

<style >


    .main_contain {
        height: 750px;
    }
    .el-menu {
        border-right: none;
    }
    .el-header{
        background-color: #f9f7f7;
        display: flex;
        justify-content: space-between;
        color: #000000;
        padding-left: 800px;
        align-items: center;
        font-size: 40px;

    }

    .el-aside {
        background-color: #f9f7f7;
        color: #000000;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #000000;


    }

    body > .el-container {

    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>